<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="side">返回</span>
      </div>
      <div class="div">数据阅读授权</div>
      <div class="div"></div>
    </header>
    <div class="content">
      <van-checkbox-group v-model="result">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="index"
            :title="`${item.dict_name}`"
            @click="toggle(index, item.dict_value)"
          >
            <template #right-icon>
              <van-checkbox :disabled="index === 0" :name="item.dict_value" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <div class="doctor">
        <van-cell >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">服务效期:</span>
            <button @click="isStart">{{formatDate(starCurrentDate)}}</button>
            <span style="margin: 0 8px;font-size: 15px;line-height: 29px">至</span>
            <button @click="isEnd">{{formatDate(endCurrentDate)}}</button>
          </template>
          <template #extra>
          </template>
        </van-cell>
        <van-checkbox-group v-model="doctorResult">
          <van-cell
            clickable
            @click="doctorToggle()"
          >
            <template #title>
              <van-checkbox :name="doctorRadio" ref="checkboxes" >
                {{'主管' + title}}
              </van-checkbox>
            </template>
          </van-cell>
        </van-checkbox-group>
        <van-checkbox-group v-model="agreeResult">
          <van-cell
            clickable
            @click="agreeDoctor()"
          >
            <template #title>
              <van-checkbox :name="agreeRadio" :disabled="isDisabled" ref="checkboxes" >
                <span>{{'同意' + title + '签约服务协议书'}}</span>
              </van-checkbox>
            </template>
          </van-cell>
        </van-checkbox-group>
      </div>
    </div>
    <div class="bottom">
      <button @click="signature">签字确认</button>
    </div>
<!--     开始日期-->
    <van-popup v-model="startShow" round position="bottom"
               @close="startClose"
    >
      <van-datetime-picker
        v-model="starCurrentDate"
        type="date"
        title="选择服务开始时间"
        :min-date="minDate"
        :max-date="StarmaxDate"
        @confirm="startShow = false"
        @cancel="startShow = false"
      />
    </van-popup>
<!--    结束日期-->
    <van-popup v-model="endShow" round position="bottom">
      <van-datetime-picker
        v-model="endCurrentDate"
        type="date"
        title="选择服务结束时间"
        :min-date="endminDate"
        :max-date="EndmaxDate"
        @confirm="endShow = false"
        @cancel="endShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'Treaty',
  data () {
    return {
      userid: '',
      title: '',
      doctorid: '',
      doctorRadio: 0,
      doctorResult: [1],
      agreeRadio: 0,
      agreeResult: [1],
      isDisabled: true,
      list: [],
      result: [],
      radioList: [],
      doctorList: [],
      startShow: false, // 开始时间弹出
      endShow: false, // 结束时间弹出
      starCurrentDate: new Date(), // 开始时间选择
      endCurrentDate: new Date(new Date().getFullYear() + 1,
        new Date(new Date().getTime() - (1000 * 60 * 60 * 24)).getMonth(),
        new Date(new Date().getTime() - (1000 * 60 * 60 * 24)).getDate()), // 结束时间选择
      minDate: new Date(2000, 10, 1),
      endminDate: new Date(), // 结束最小时间
      StarmaxDate: new Date(2030, 10, 1), // 开始时间最大值
      EndmaxDate: new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate()) // 结束时间最大值
    }
  },
  mounted () {
    // var dataValue = new Date(new Date('2020-12-1').getTime() - (1000 * 60 * 60 * 24))
    // console.log(dataValue)
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.title = this.$utils.getUrlKey('title')
    this.doctorid = this.$utils.getUrlKey('doctorid')
    $('.content').css('height', $(window).height() - $('.bottom').height() - $('header').height() + 'px')
    if (Number(sessionStorage.getItem('activeVal')) === 1) {
      this.isDisabled = false
      this.agreeRadio = Number(sessionStorage.getItem('activeVal'))
    } else {
      this.isDisabled = true
      this.agreeRadio = 0
    }
    // // console.log(JSON.parse(sessionStorage.getItem('data')) === null)
    if (JSON.parse(sessionStorage.getItem('data')) !== null) {
      var data = JSON.parse(sessionStorage.getItem('data'))
      this.result = data.signOauths
      this.doctorRadio = data.is_manage_doctor
      this.endCurrentDate = new Date(data.sign_end_date)
      this.starCurrentDate = new Date(data.sign_start_date)
    }
    // 获取字典
    this.get()
  },
  methods: {
    // 开始关闭时候的操作
    startClose () {
      console.log(this.starCurrentDate)
      this.endCurrentDate = new Date(new Date(this.starCurrentDate).getFullYear() + 1, new Date(new Date(this.starCurrentDate).getTime() - (1000 * 60 * 60 * 24)).getMonth(), new Date(new Date(this.starCurrentDate).getTime() - (1000 * 60 * 60 * 24)).getDate())
    },
    // 确定签字
    signature () {
      if (Number(this.agreeRadio) !== 1) {
        Toast('请选择同意' + this.title + '签约服务协议书')
      } else {
        var obj = {
          patient_user_id: this.userid,
          staff_user_id: this.doctorid,
          sign_start_date: this.formatDate(this.starCurrentDate),
          sign_end_date: this.formatDate(this.endCurrentDate),
          is_agreement: this.agreeRadio,
          is_manage_doctor: this.doctorRadio,
          signOauths: this.result
        }
        var data = JSON.stringify(obj)
        window.sessionStorage['data'] = data
        console.log(sessionStorage.getItem('data'))
        this.$router.push({path: '/write', query: {}})
      }
    },
    // 点击同意协议书
    agreeDoctor () {
      console.log(this.doctorRadio)
      var obj = {
        patient_user_id: this.userid,
        staff_user_id: this.doctorid,
        sign_start_date: this.formatDate(this.starCurrentDate),
        sign_end_date: this.formatDate(this.endCurrentDate),
        is_agreement: this.agreeRadio,
        is_manage_doctor: this.doctorRadio,
        signOauths: this.result
      }
      var data = JSON.stringify(obj)
      window.sessionStorage['data'] = data
      // 点击协议跳转
      this.$router.push({path: '/empower', query: {'title': this.title}})
    },
    // 点击主管家庭医生
    doctorToggle (value) {
      if (this.doctorRadio === 1) {
        this.doctorRadio = 0
      } else {
        this.doctorRadio = 1
      }
    },
    // 点击开始
    isStart () {
      this.startShow = true
      this.endShow = false
    },
    isEnd () {
      this.startShow = false
      this.endShow = true
    },
    // 获取字典
    get () {
      this.$http.listByType({dict_type: 'patient_oauth'})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            for (var i = 0; i < res.data.data.length; i++) {
              this.list = res.data.data
              if (i === 0) {
                this.radioList[i] = res.data.data[i].dict_value
                this.result[i] = res.data.data[i].dict_value
              } else {
                this.radioList[i] = ''
              }
            }
            console.log(this.radioList)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    formatDate (date) {
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      return YY + MM + DD
    },
    // 按钮
    toggle (index, dictValue) {
      if (this.radioList[index] !== '') {
        this.radioList[index] = ''
      } else {
        this.radioList[index] = dictValue
      }
      if (index !== 0) {
        this.$refs.checkboxes[index].toggle()
      }
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100vh;
    background: #FAF9FE;
    font-size: 15px;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background: #FFFFFF;
    z-index: 999;
  }
  header img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  header div{
    width: 33%;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
    display: flex;
    align-items: center;
  }
  header div:nth-child(2) {
    justify-content: center;
  }
  .content{
    width: 100%;
    overflow: auto;
  }
  .side{
    color: #1da4f2;
  }
  .bottom{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    bottom: 0;
  }
  .bottom button{
    width: 92%;
    height: 44px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    border-radius: 22px;
    border: none;
    color: #FFFFFF;
  }
  /deep/ .van-cell{
    font-size: 15px;
  }
  .doctor{
    margin-top: 10px;
  }
  .doctor button{
    width: 90px;
    height: 29px;
    border: 1px solid #1DA4F2;
    border-radius: 3px;
    background: #FFFFFF;
  }
  /deep/ .van-checkbox__label--disabled{
    color: #333333;
  }
  /deep/ .van-checkbox__icon--disabled{
    background: #FFFFFF;
  }
  /deep/ .van-checkbox__icon--disabled .van-icon{
    background: #FFFFFF;
  }
  /deep/ .van-checkbox__icon--checked .van-icon {
    color: #fff !important;
    background-color: #1989fa !important;
    border-color: #1989fa !important;
  }
  /deep/ .van-picker__confirm{
    color: #1da4f2;
  }
</style>
